<template>
	<view class="index">
		<!-- 显示标题和答题卡选项 -->
		<view v-if="dataFlag" class="content">
			<!-- cu-bar操作条，bg-white背景白色，solid-bottom底部实线 -->
			<view class="cu-bar bg-white solid-bottom">
				<view class="action text-black">
					<text>{{ typeStr[currentType] }}</text>
				</view>
				<!-- 通过绑定的标志位是否存在值去控制答题卡显示与隐藏 -->
				<view class="action"><button class="cu-btn bg-blue shadow" @tap="showCardModal" data-target="modalCard">答题卡</button></view>
			</view>
			<!-- 试题面板 -->
			<!-- swiper下的每个swiper-item是一个滑动切换区域 -->
			<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" style="flex: 1">
				<swiper-item v-for="(subject, index) in subjectList" :key="index">
					<!-- 根据subjectIndex题目索引显示题目 -->
					<view v-if="index == subjectIndex">
						<view class="cu-bar bg-white solid-bottom">
							<view class="action text-black">{{ subjectIndex+1 }}. {{ subject.title }}</view>
						</view>
						<!-- 根据数据中的类型显示不同组件 -->
						<view>
							<radio-group class="block" @change="RadioboxChange" v-if="subject.type === '1' || subject.type === '2'">
								<view class="cu-form-group" v-for="(option, index) in subject.optionList" :key="index">
									<radio
										class="blue"
										:class="subject.userAnswer.indexOf(option.id) > -1 ? 'checked' : ''"
										:value="option.id"
										:checked="subject.userAnswer.indexOf(option.id) > -1 ? true : false"
									></radio>
									<view class="title text-black">{{ option.id }}.{{ option.content }}</view>
								</view>
							</radio-group>

							<checkbox-group class="block" @change="CheckboxChange" v-else-if="subject.type === '3'">
								<view class="cu-form-group" v-for="(option, index) in subject.optionList" v-bind:key="index">
									<checkbox
										class="blue"
										:value="option.id"
										:class="subject.userAnswer.indexOf(option.id) > -1 ? 'checked' : ''"
										:checked="subject.userAnswer.indexOf(option.id) > -1 ? true : false"
									></checkbox>
									<view class="title  text-black">{{ option.id }}.{{ option.content }}</view>
								</view>
							</checkbox-group>

							<view v-else-if="subject.type === '4'">
								<view class="cu-form-group solid-bottom">
									<view class="title  text-black">答：</view>
									<input placeholder="文本输入框" name="input" v-model="subject.userAnswer" @blur="textInput" />
								</view>
							</view>

							<view v-else-if="subject.type === '5'">
								<view class="cu-bar cu-bar-title bg-white"><view class="action  text-black">答：</view></view>
								<view class="cu-form-group solid">
									<textarea maxlength="-1" @blur="textInput" v-model="subject.userAnswer" placeholder="多行文本输入框"></textarea>
								</view>
							</view>
						</view>
						<!-- 控制是否显示正确答案 -->
						<view v-show="showAnswer[subjectIndex]" class="margin-top solid-top">
							<view class="cu-bar">
								<view class="action  text-grey">
									<text>正确答案：</text>
									<text class="solid-bottom  padding-left text-blue">{{ subject.answer }}</text>
								</view>
							</view>
							<view class="cu-bar cu-bar-title">
								<view class="action  text-grey"><text>解析：</text></view>
							</view>
							<view class="text-content padding  text-grey">{{ subject.explain }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 底部栏 -->
			<view class="cu-bar tabbar bg-white shadow">
				<view class="action" @click="MoveSubject(-1)">
					<view class="cuIcon-cu-image"><text class="lg cuIcon-back text-gray"></text></view>
					<view class="text-gray">上一题</view>
				</view>
				<view class="action" @click="MoveSubject(1)">
					<view class="cuIcon-cu-image"><text class="lg text-gray cuIcon-right"></text></view>
					<view class="text-gray">下一题</view>
				</view>

				<view class="action" @tap="SubmitPaper">
					<view class="cuIcon-cu-image"><text class="lg cuIcon-favor" :class="['text-gray']"></text></view>
					<view :class="['text-gray']">交卷</view>
				</view>

				<view class="action" @click="ShowAnswerChange">
					<view class="cuIcon-cu-image"><text class="lg cuIcon-question" :class="[showAnswer[subjectIndex] ? 'text-blue' : 'text-gray']"></text></view>
					<view :class="[showAnswer[subjectIndex] ? 'text-blue' : 'text-gray']">解答</view>
				</view>
			</view>
		</view>

		<view v-else class="bg-white flex solid-bottom padding align-center" style="height: 100%;">
			<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
		</view>

		<!-- 答题卡窗口 -->
		<view class="cu-modal" :class="modalCard == 'modalCard' ? 'show' : ''" @tap="hideCardModal">
			<view class="cu-dialog" @tap.stop>
				<!-- 设置可滚动视图区域 -->
				<scroll-view class="page padding" :scroll-y="true" style="height: 80vh">
					<view class="cu-bar solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-blue"></text>
							答题卡
						</view>
					</view>
					<view class="grid col-5 ">
						<!-- 根据数据的userAnswer长度判断选项是否有选择，没答过的题目点击跳转 -->
						<view class="margin-tb-sm text-center" v-for="(subject, index) in subjectList" :key="index">
							<button class="cu-btn round" :class="[subject.userAnswer.length === 0 ? 'line-grey' : 'bg-blue']" @click="AppointedSubject(index)">
								{{ index + 1 }}
							</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 普通弹窗 -->
		<view class="cu-modal" :class="popData.flag ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ popData.title }}</view>
					<view class="action" @tap="HidePop"><text class="cuIcon-close text-blue"></text></view>
				</view>
				<view class="padding-xl">{{ popData.content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import index from './index.js';
export default index;
</script>

<style lang="scss" scoped>
@import '../../colorui/animation.css';
@import './index.scss';
</style>
